:global {

    @prefix: 'no_merge_wptd';
    @avatar-prefix-cls: ~'@{prefix}-avatar';
    @avatar-size-sm: 1rem;
    @avatar-size-base: 1.3rem;
    @avatar-size-lg: 1.45rem;
    @border-radius-base: 0;
    @avatar-color: #fff;
    @avatar-bg: #ccc;

    .reset-component() {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        list-style: none;
    }


    .avatar-size(@size) {
        width: @size;
        height: @size;
        line-height: @size;
        border-radius: 50%;
    }


    .@{avatar-prefix-cls}-decoration {
        position: absolute;
        z-index: 1;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
        >img{
            background: transparent;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .@{avatar-prefix-cls}-wrap{
        position: relative;
    }
    .@{avatar-prefix-cls} {
        .reset-component;

        position: relative;
        display: inline-block;
        overflow: hidden;
        color: @avatar-color;
        white-space: nowrap;
        text-align: center;
        vertical-align: middle;
        background: @avatar-bg;

        &-image {
            background: transparent;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-size(@avatar-size-base);

        &-lg {
            .avatar-size(@avatar-size-lg);
        }

        &-sm {
            .avatar-size(@avatar-size-sm);
        }

        &-square {
            border-radius: @border-radius-base;
        }




    }
}
